<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>热点爆文</title>
	<link rel="stylesheet" type="text/css" href="../../build/css/base.css"/>
	<link rel="stylesheet" type="text/css" href="../../build/css/main.css">
	<link rel="stylesheet" type="text/css" href="../../build/css/find.css">
	<script type="text/javascript" src="../../build/js/jquery.min.js"></script>
	<script src="../../build/public/vue.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../build/js/template.js"></script>
	<script type="text/javascript" src="../../build/public/base.js"></script>
	<script type="text/javascript" src="../../build/public/vue-resource.js"></script>
	<script type="text/javascript" src="../../build/js/config.js"></script>
	
</head>
<body>
	<div id="container" class="hotspot" style="padding-bottom: 50px;">
		<find-menu></find-menu>
		<div class="banner" style="overflow:hidden;height:auto;max-height:200px;width:100%;position:relative;">
			<a v-for="(item,index) in hotspotData" v-bind:href="item.idStr2" v-if="index <= 0" style="overflow:hidden;height:auto;max-height:200px;display: block;">
				<img v-bind:src="item.pictureUrl2"  style="width:100%;height:auto;display:block;"/>
				<p class="title" style="height:100%;line-height: 100%;padding:0;"><span style="position:absolute;top:50%;left:2.5%;margin-top:-9px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align:center;display:block;width:95%;">{{item.title}}</span></p>
			</a>
		</div>
		<div class="hotspot-list">
			<a v-for="(item,index) in hotspotData" v-bind:href="item.idStr2" v-if="index != 0" style="overflow:hidden;">
				<span style="width:40%;display:block;float:left;overflow:hidden;">
					<img v-bind:src="item.pictureUrl2" alt="图片加载失败" style="height:115px;width:auto;"/>
				</span>
				<p>{{item.title}}</p>
			</a>
		</div>
		<div class="empetDate" v-if="! hotspotData.length" style="display: block;">
			<span class="iconfont">&#xe602;</span>
			抱歉！没找到更多数据
		</div>
		<my-footer></my-footer>
	</div>
	<script type="text/javascript" src="../../build/js/common.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#container",
			data:{
				firstItem:[],
				hotspotData:[],
				page:1,
			},
			mounted:function(){
				this.$nextTick(function(){
					this.getData()
					refresh(this.refreshData());
				})
			},
			methods:{
				init:function(){
					//初始化
					this.getData()
				},
				getData:function(){
					//初始化加载提示
					loader.init();
					var hotspotIdStr = window.localStorage.getItem('encyclopediasIdStr')
					get('/discovery/opinion/list',{currentPage:this.page,opinionCategoryId:hotspotIdStr,deviceType:'WECHAT'},function(res){
						vm.hotspotData = vm.hotspotData.concat(res.data)
						for(var i=0;i<vm.hotspotData.length;i++){
							vm.hotspotData[i].pictureUrl2 = domain + vm.hotspotData[i].pictureUrl
							vm.hotspotData[i].idStr2 ='detail.html?idStr=' + vm.hotspotData[i].idStr
						}
						if(res.data.length < 7){
							refreshText('到底了哦！')
						}else{
							refreshText('上拉加载更多数据')
						}
						if(vm.hotspotData.length <7){
							refreshText('')
						}
						loader.remove()
					},function(res){
						toast(res.error)
					})		
				},
				refreshData:function(){
					//上拉加载数据
					return function(){
						vm.page++;
						vm.getData()	;
						console.log('vm.page = '+vm.page);
					}
				}
			},
			created:function(){
				//this.init()
			}
			
			
			
			
		})
		
	</script>
</body>
</html>